<!-- 记事本 -->
<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">{{title}}</span>
				<i  slot="right-slot" >
					<i class="iconfont icon-jiahao" style="font-size: 25px;padding-left: 15px;" @click="bubble"></i>
				</i>
			</navitop>
		</div>
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :style="'margin-top:' + nv_height">
			<!-- 搜素框 -->
			<div class="search_input_out">
				<div class="close_shelter" v-if="screen_type"> 
					<div @click="sela_close">关闭</div>
				</div>
				<div class="serarch_int">
					<input  placeholder="搜索记事本" @confirm="confirm" @input="conserch"/>
				</div>
			</div>
			
			
			<!-- 列表 -->
			<view class="evaluate">
				<view class= "evaluate_content"  v-for="(item,index)  in dataSorce" @click="data_edit(item)" @touchstart="gotouchstart(item)" @touchmove="gotouchmove(item)" @touchend="gotouchend(item)" >
					<div class="shelter_style" :style="(item.id == stl_id) ? 'border:1px solid #007BFF':''" @click.stop="shelter(item.id)" v-if="screen_type"></div>
					<view >
						{{item.title == ''? '(无主题)': item.title}}
					</view>
					<view class="evaluate_co">
						{{item.content == ''? '(无摘要)': item.content}}
					</view>
					<view class="calss_type">
						<div class="evaluate_co">{{item.createDate}}</div><div class="class_color_type">{{item.dictValue}}</div>
					</view>
				</view>
			</view>
			
			
			<div class="null_title" v-if="dataSorce == ''">
				<div>
					<i class="iconfont icon-empty iconcize"></i>
				</div>
				<div class="null_title_tow">
					没有更多数据
				</div>
			</div>
			
			<div class="bottom_stal" v-if="screen_type" >
				<div @click="data_del">
					删除
				</div>
				<div @click="data_move">
					移动
				</div>
			</div>
		</mescroll-body>
		
		
		
		<popus ref="alert">
			<div class="alert_out">
				<!-- <div style="width: 100%; text-align: center;"> -->
				<div style="width: 100%; text-align: center;height: 40px;line-height: 40px;border-bottom: 1px solid #f0f0f0f0;">
					选择迁移分类
				</div>	
				<!--<div  class="alert_top">	
					 <div class="alert_left"></div>
					<div class="alert_right" @click="class_add"><i class="iconfont icon-jiahao" style="padding: 0 8px 0 0" ></i>新建分类</div> 
				</div>-->
				<div class="alert_class">
					<scroll-view class="staff_b" scroll-y="true" touch-action=auto; >
						<div class="alert_list" v-for="(item,index) in class_type_list" @click="select_data(item)">
							{{item.dictValue}}
						</div>
					</scroll-view>	
				</div>
			</div>
		</popus>
		
		
		
		<!-- 气泡弹窗 -->
		 <chunLei-popups v-model="value" :popData="date" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end">
		 </chunLei-popups>

	</view>
</template>

<script>
	import navitop from '@/components/common/navi-top'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups";
	import {pageList,dictpage,persave,perdel} from '@/common/api/my/myapi.js'
	import {dictType} from '@/common/api/table.js'
	export default {
		components:{
			navitop,
			chunLeiPopups,
			popus
		},
		mixins: [MescrollMixin],
		data(){
			return {
				value: false,
				title: '',
				date: [{title:'添加',code:'add',icon:'icon-tianjiaadd143'}],
				downOption: {
					auto: false,
					beforeEndDelay: 300,
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						use: true,
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
				nv_height: '',
				na_class: [],
				dataSorce: '',
				na_list: [],
				rundataSrce: [],
				pages: 1,	// 分页
				ser_title: '',	// 搜索数据
				
				class_type_list: [],	// 分类列表
				
				timeOutEvent: 0 ,//定时器  
				
				screen_type: false,
				
				stl_id: [],
				
				move_data: {},	// 移动数据
			}
		},
		onLoad(option) {
			this.title = option.title;
		},
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 60 + 'px';
			
			this.page_List();
		},
		methods:{
			
			shelter(val){
				let tall = '';
			},
			
			sela_close(val){
				this.screen_type = false;
			},
			
			// 移动
			data_move(val){
				this.$refs.alert.open('bottom')
			},
			
			// 保存移动
			select_data(val){
				this.move_data.contentType = val.id
				uni.showLoading({
					title: '加载中...'
				})
				delete this.move_data.createDate
				persave(this.move_data).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						this.$refs.alert.close();
						setTimeout(()=>{
							this.page_List();
							this.screen_type = false;
						},1500)
					}
				})
			},
			
			// 删除
			data_del(){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除吗？',
				    success: function (res) {
				        if (res.confirm) {
				           perdel([_this.stl_id]).then((rows) => {
								if(rows.code == 200){
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									setTimeout(()=>{
										_this.page_List();
										_this.screen_type = false;
									},1500)
								}
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			
			},
			
			gotouchstart(val){
			   let that = this;
			   clearTimeout(this.timeOutEvent);//清除定时器
			   this.timeOutEvent = 0;
			   this.timeOutEvent = setTimeout(function(){
					  //执行长按要执行的内容，
					  that.stl_id = val.id;	
					  that.move_data = val;
					  that.screen_type = true;
			     },600);//这里设置定时
				 
			 },
			 
			      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
			 gotouchend(){
			     clearTimeout(this.timeOutEvent);
			       if(this.timeOutEvent!=0){
			         //这里写要执行的内容（尤如onclick事件）
			      }
			 },
			 //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
			 gotouchmove(){
			      clearTimeout(this.timeOutEvent);//清除定时器
			      this.timeOutEvent = 0;
			 },
			
			
			// 回车
			confirm(val){
				if(val.target.value){
					this.ser_title = val.target.value;
				}else{
					this.ser_title = '';
				}
				this.page_List();
			},
			
			// 输入查询
			conserch(val){
				if(val.target.value){
					this.ser_title = val.target.value;
				}else{
					this.ser_title = '';
				}
				this.page_List();
			},
			
			// 获取列表
			page_List(){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				pageList({'type': 2,current: this.pages,size: 10,title: this.ser_title}).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						if(this.pages == 1){
							this.dataSorce = rows.data.records;
						}else{
							rows.data.records.filter(item => {
								_this.dataSorce.push(item);
							})
						}
						this.zd_list();
					}
				})
			},
			
			// 返回
			outs(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			},
			
			// 气泡弹窗
			bubble(){
				this.value = !this.value;
			},
			
			// 添加
			tapPopup(val){
				if(val.code == 'add'){
					uni.navigateTo({
						url: '/pages/common/my/subpage/evaluate/evaluateadd?title=添加'
					})
				}
			},
			
			// 详情
			data_edit(val){
				uni.navigateTo({
					url: '/pages/common/my/subpage/evaluate/evaluateedit?title=详情' + '&id=' + val.id
				})
			},
			
			// 获取分类导航
			zd_list(){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				dictType().then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						rows.data.records.filter(function(item) {
							if(item.dictCode === "person_note"){
								_this.na_class = item;
							}
						})
					}
					dictpage({'page.size':-1,'dictTypeId':_this.na_class.id}).then((rst) => {
						if(rst.code == 200){
							this.class_type_list = rst.data.records;
							this.dataSorce.forEach(row => {
								rst.data.records.forEach(tal => {
									if(row.contentType == tal.id){
										this.$set(row,'dictValue',tal.dictValue)
									}
								})
							})
						}
					})
				})
			},
			
			
			mescrollInit(){
				
			},
			
			// 下拉
			downCallback(val){
				this.pages = 1;
				this.screen_type = false;
				this.page_List();
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 500)
			},
			
			// 上拉
			upCallback(){
				this.pages++;
				this.screen_type = false;
				this.page_List();
				setTimeout(()=>{
					this.mescroll.endErr();
				},500)
			}
		}
	}
	
</script>

<style scoped lang="scss">
@import '@/static/css/common/public_css';

.close_shelter {
	// border: 1px solid red;
	position: absolute;
	width: 95%;
	height: 30px;
	line-height: 30px;
	z-index: 5;
	text-align: center;
	background: #fff;
	// background: rgba(0,0,0,0.2);
}


// 长按选中遮罩
.shelter_style {
	position: absolute;
	width: 95%;
	height: 170rpx;
} 


// 长按底部操作
.bottom_stal {
	display: flex;
	justify-content: space-around;
	position: fixed;	
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	margin: auto;
	color: #fff;
	background: #0098EF;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	border-radius: 4px;
	bottom: 1px;
}



// 头部切换
	.wid_out {

		height: 90rpx;
		line-height: 90rpx;
		background-color: #fff;
		margin-bottom: 10px;
		padding: 0 10px 0 10px;
		display: flex;
		// justify-content: space-between;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		div {
			padding:  0 40rpx 0 40rpx;
		}
	}
	
// 列表
.evaluate {
	width: 100%;
	height: 100%;
	.evaluate_content {
		width: 95%;
		margin: auto;
		background-color: #fff;
		border-radius: 4px;
		margin-bottom: 10px;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
		view {
			padding: 10rpx 0 10rpx 30rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 4px;
		}
		.evaluate_co {
			overflow: hidden;
			color: #AFAFAF;
		}
	}
}

.calss_type {
	display: flex;
}

.class_color_type {
	color: #72B579;
	margin-left: 10%;
}

	// 底部弹窗
	.alert_out {
		height: 400px;
		background-color: #fff;
		
	}	
	
	.alert_top {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #f0f0f0f0;
		display: flex;
		justify-content: space-between;
		.alert_left {
			width: 30%;
			text-align: center;
		}
		.alert_right {
			width: 30%;
			text-align: center;
			padding: 0 10px 0 0;
			color: #2283E4;
		}
	}
	
	.alert_class {
		height: 355px;
	}
	
	.staff_b {
		 height: 100%;
	}
	
	.alert_list {
		height: 40px;
		line-height: 40px;
		padding: 0 0 0 20px;
	}
</style>
